<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章查询</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                type: "get",
                url: "/selectAllArticle",
                dataType: "json",
                success: function(data) {
                    var tr="";
                    console.log(data);
                    $.each(data, function(index, article) {
                        tr +="<div class='box'><h3>"+article.title+"</h3><p><span class='img'></span>"+article.articleid+article.createTime+"</p>"+
                            "<p>"+article.content+"</p><a href='selectById?articleid="+article.articleid+"'><button value='详情'>详情</button></a></div>";

                    });
                    $('#top').html(tr);
                }
            });


        });
    </script>
    <style>
        .box{
            border-bottom:1px gray solid;
            padding-bottom: 10px;

        }
        .img{
            border-radius: 6px;
            width: 20px;
            border: 1px gray solid;
            height: 20px;
        }

        .left{
            float: left;
        }

        .right{
            float: right;
        }

        .input{
            width: 300px;
            height: 40px;
            line-height: 40px;
        }
        #but{
            width: 80px;
            height: 40px;
            background-color: blue;

        }
    </style>
</head>
<body>
    <div id="top">

    </div>
</body>
</html>